<template>
  <div id="etekcity" class="flex-x-y-center">
    <!-- <div class="img-bg-zhongqiu">
      <div class="bg"></div>
      <img class="shuying" src="@/assets/节日/中秋节/树影.png" alt="" />
      <img class="feiji" src="@/assets/节日/中秋节/云.png" alt="" />
      <img class="shien" src="@/assets/节日/中秋节/嫦娥.png" alt="" />
      <img class="renwu" src="@/assets/节日/中秋节/中秋.png" alt="" />
    </div> -->
    <!-- <div class="img-bg-guoqing">
      <div class="bg">
        <img src="@/assets/节日/国庆节/bg.jpg" alt="">
      </div>
      <img class="shuying" src="@/assets/节日/国庆节/天安门.png" alt="" />
      <img class="feiji" src="@/assets/节日/国庆节/国庆文字.png" alt="" />
      <img class="shien" src="@/assets/节日/国庆节/男孩.png" alt="" />
      <img class="renwu" src="@/assets/节日/国庆节/女孩.png" alt="" />
    </div> -->
    <!-- <div class="img-bg-zhounianqing">
      <div class="bg">
        <img src="@/assets/节日/周年庆/bg.jpg" alt="">
      </div>
      <img class="logo" src="@/assets/节日/周年庆/logo.png" alt="" />
      <img class="dangao" src="@/assets/节日/周年庆/生日蛋糕.png" alt="" />
      <img class="zhounian" src="@/assets/节日/周年庆/十周年.png" alt="" />
    </div> -->
    <div class="img-bg-fuqinjie">
      <div class="bg">
        <img src="@/assets/节日/父亲节/bg.jpg" alt="">
      </div>
      <img class="logo" src="@/assets/节日/父亲节/wenzi.png" alt="" />
      <img class="sun" src="@/assets/节日/父亲节/sun.png" alt="" />
      <img class="qiche" src="@/assets/节日/父亲节/qiche.png" alt="" />
      
    </div>
    <div class="admin">
      <div class="main">
        <!-- <div class="flex-x-y-center">
          <div class="gonggao"></div>
        </div> -->
        <div class="main-div">
          <div class="football" @click="toApplyFn">
            <img src="@/assets/football/足球.png" alt="" />
          </div>
          <div class="row red flex-x-y-center" v-if="!socketVisiable">
            服务器已经失去连接，小食正在努力连接中...
          </div>
          <div v-if="fabuVisiable" class="row flex-x-y-center">
            <!-- <img src="logo.png" style="width: 50px" alt="" /> -->
            <!-- <span>欢迎您{{ currentUser.username }}</span> -->
            <span style="margin: 0 10px"
              >最新发布人：{{ fabuObj.faburen }}</span
            >
            <span>最新发布时间：{{ fabuObj.tjTime }}</span>
          </div>
          <div v-else class="row flex-x-y-center">
            <img src="logo.png" style="width: 50px" alt="" />今日还未发布{{
              new Date().Format("yyyy-MM-dd")
            }}
            <!-- <span class="goto" @click="gotoAdmin">去看看发布界面</span> -->
            <!-- <span class="goto" @click="ceshi">测试socket</span> -->
          </div>
          <div v-if="fabuVisiable">
            <div class="row flex-x-y-center">
              <span>开始时间：{{ fabuObj.startTime }}</span>
              <span style="margin-left: 10px"
                >结束时间：{{ fabuObj.endTime }}</span
              >
            </div>
            <!-- <div v-if="kedian" class="row flex-x-y-center">
                        点餐倒计时:{{daojishi}}
                    </div> -->
            <div class="row flex-x-y-center">
              <div class="left">公告：</div>
              <div class="middle">{{ fabuObj.remark }}</div>
            </div>

            <div class="row" v-if="users.length" style="flex-direction: column">
              <div style="font-size: 17px; font-weight: bolder">
                <span>点餐信息</span>
                <Zoom
                  :error="error"
                  :total="total"
                  :orderObj="orderObj"
                  :key="change"
                ></Zoom>
              </div>
              <div v-if="kedian" style="color: #0e335a">
                倒计时:{{ daojishi }}秒
              </div>
              <!-- <div class="total" style="margin: 10px 0; width: 100%">
              {{ total }}
            </div> -->
              <div
                :style="
                  info.username == getUsername(diancanren) ? `color:red` : ''
                "
                class="info"
                v-for="info in users"
              >
                <div class="user">{{ info.username }}({{ info.level }})：</div>
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="info.tjtime"
                  placement="right"
                >
                  <!-- <div class="caipin">{{ getOrder(info.caipin) }}</div> -->
                  <div class="caipin" v-html="getOrder(info.caipin)"></div>
                </el-tooltip>
              </div>
            </div>
            <div class="row" v-if="error.length" style="color: red">
              <div class="left">点餐错误：</div>
              <div class="middle">最新发布菜品中没有以下菜品{{ error }}</div>
            </div>
            <div v-if="kedian">
              <!-- <div class="row">
              <div class="left">点餐人：</div>
              <div class="middle">
                <el-select
                  v-model="diancanren"
                  filterable
                  placeholder="请选择点餐人"
                >
                  <el-option
                    v-for="item in yonghuArr"
                    :key="item.id"
                    :label="item.username"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="right">
                <div
                  style="
                    color: #0e335a;
                    margin-left: 20px;
                    height: 40px;
                    line-height: 40px;
                  "
                >
                  倒计时:{{ daojishi }}
                </div>
              </div>
            </div> -->
              <div class="row">
                <div class="left">
                  <div>当前菜品：</div>
                  <div>
                    <span class="goto" @click="doubleClick">好吃double</span>
                  </div>
                </div>
                <div class="middle">
                  <div>
                    <el-checkbox-group v-model="caipinSelectArr">
                      <el-checkbox
                        :checked="info.youxiao == '是'"
                        v-for="info in caipinArr"
                        :label="info"
                        :key="info"
                      >
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </div>
              </div>
              <div class="row" v-if="caipinSelectArr.length">
                <div class="left">已点菜品：</div>
                <div class="middle">
                  {{ getTotalStr(caipinSelectArr) }}
                </div>
              </div>
              <div class="row flex-x-y-center">
                <el-button
                  :disabled="!socketVisiable"
                  type="primary"
                  style="width: 120px"
                  @click="diancan"
                  >提交</el-button
                >
                <el-button
                  :disabled="!socketVisiable"
                  v-if="yidian"
                  type="danger"
                  style="width: 120px"
                  @click="delDiancanMe"
                  >删除点餐</el-button
                >
              </div>
            </div>
            <div v-else>
              <div class="row flex-x-y-center" style="color: red">
                {{ tishi }}
              </div>
            </div>
            <!-- <div class="flex-x-y-center">
            <span class="goto" @click="gotoAdmin">去看看发布界面</span>
          </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Zoom from "@/components/zoom";
import { Loading } from "element-ui";
import {
  getYonghu,
  getFoods,
  delDiancanMe,
  diancan,
  getDiancan,
} from "@/api/api";
export default {
  name: "Home",
  components: { Zoom },
  data: function () {
    return {
      change: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
      foodName: "",
      caipinSelectArr: [],
      caipinArr: [],
      diancanren: "",
      remark: "",
      fabuVisiable: false,
      woyaofabu: true,
      fabuObj: {},
      yonghuArr: [],
      users: [],
      total: "",
      error: [],
      daojishi: 0,
      kedian: false,
      tishi: "",
      totalTime: 0,
      reload: false,
      oldSelectArr: [],
      currentUser: {},
      yidian: false,
      firstInit: true,
      clark: 0,
      socketVisiable: false,
      loadIndex: 0,
      orderObj: {},
    };
  },
  sockets: {
    disconnect(msg) {
      console.log("连接已经关闭");
      this.socketVisiable = false;
      this.$message({
        message: "服务器已经失去连接...",
        type: "error",
      });
    },
    connect(msg) {
      console.log("连接已经打开");
      // this.loadIndex.close();
      this.socketVisiable = true;
      this.$message({
        message: "服务器已经恢复连接...",
        type: "success",
      });
      // this.id = this.$socket.id;
      // this.$socket.emit("sentToServer", "fdsfsdf"); //监听connect事件
    },
    sentToServer(data) {
      // debugger
      //监听message事件，方法是后台定义和提供的
      console.log(data);
    },
    getFoodsToClient(data) {
      this.getDiancan("socket", data);
    },
    checkFabuToClient(data) {
      //监听message事件，方法是后台定义和提供的
      this.socketVisiable = true;
      console.log(data);
      if (data.fabu) {
        if (data["type"]) {
          this.$confirm("管理员重新发布了信息，需要重新加载数据！", "提示", {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "重新加载",
            cancelButtonText: "再看看",
            type: "info",
          })
            .then(() => {
              this.reload = true;
              this.loadFabuData(data);
            })
            .catch(() => {
              location.href = encodeURI("http://www.etekcity.com/");
            });
        } else {
          this.loadFabuData(data);
        }
      } else {
        console.log(2);
        // this.getYonghu()
        this.fabuVisiable = false;
        this.kedian = false;
        // this.clark = setInterval(() => {
        //   this.jishi();
        // }, 3000);
        // console.log(this.clark);
      }
    },
  },

  mounted() {
    this.clark = setInterval(() => {
      if (this.fabuVisiable && this.kedian) {
        // console.log(this.daojishi);
        this.daojishi = this.daojishi > 0 ? this.daojishi - 1 : 0;
      }
      if (this.daojishi == 0) {
        // clearInterval(this.clark);
        // this.$socket.emit("checkFabuToClient", "");
      }
    }, 1000);
    this.$socket.emit("checkFabuToClient", "");

    let orderArr = this.$store.state.food.caipinOrder;
    let arr = [];
    orderArr.forEach((item, index) => {
      this.orderObj[item] = index + 1;
    });
    // this.getDiancan("net");
  },
  created() {
    this.currentUser = this.$store.state.food.userObj;
    this.diancanren = this.currentUser.id;
    let nowTime = new Date();
    let year = nowTime.getFullYear();
    let month = nowTime.getMonth() + 1;
    let day = nowTime.getDate();
    this.getYonghu();
  },
  beforeRouteLeave(to, form, next) {
    console.log("离开了");
    console.log(this.clark);
    window.clearInterval(this.clark);
    next();
  },
  methods: {
    toApplyFn() {
      this.$router.push({
        name: "advertise",
      });
      this.$comment.createPoint({
        tableName: "football",
        moduleName: "从点餐页来的客源",
        pageName: "/vesync/advertisePage",
        eventName: "点击足球",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    sortId(a, b) {
      return a.order - b.order;
    },
    getCaipinArrOrder(arr) {
      //对菜品数组进行排序
      let orderArr = [];
      arr.forEach((item, index) => {
        orderArr.push({
          name: item,
          order: this.orderObj[item],
        });
      });
      orderArr.sort(this.sortId);
      let returnArr = [];
      orderArr.forEach((item) => {
        returnArr.push(item.name);
      });
      return returnArr;
    },
    getOrder(caipin) {
      let arr = caipin.split(",") || [caipin];
      let orderArr = [];
      arr.forEach((item, index) => {
        orderArr.push({
          name: item,
          order: this.orderObj[item] || 100,
        });
      });
      orderArr.sort(this.sortId);
      let str = "";
      orderArr.forEach((item) => {
        // str += item.name + ",";
        str +=
          (this.error.includes(item.name)
            ? `<span style='background-color:red'>${item.name}</span>`
            : item.name) + ",";
      });
      return str.substr(0, str.length - 1);
    },
    loadFabuData(data) {
      this.fabuVisiable = data["fabu"];
      this.woyaofabu = false;
      this.fabuObj = data["fabuObj"];
      this.caipinArr = this.getCaipinArrOrder(this.fabuObj.caipin.split(","));
      this.remark = this.fabuObj.remark;
      this.kedian = data["kedian"];
      this.tishi = data["tishi"];
      this.daojishi = data["daojishi"];
      // this.getDiancan();
      this.getDiancan("net");
    },
    ceshi() {
      this.$socket.emit("sentToServer", "fdsfsdf");
    },
    gotoAdmin() {
      // this.$router.push("/etekcity/publish");
    },
    delDiancanMe() {
      this.$confirm("确定要删除吗？", "提示", {
        dangerouslyUseHTMLString: true,
        confirmButtonText: "是的",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(() => {
          delDiancanMe({
            diancanren: this.currentUser.username,
            nowDay: new Date().Format("yyyy-MM-dd"),
          }).then((res) => {
            if (res.affectedRows == 1) {
              this.caipinSelectArr = [];
              this.$message({
                type: "success",
                message: `成功删除${this.currentUser.username}今日点餐信息`,
              });
            } else {
              this.$message({
                type: "success",
                message: `没有${this.currentUser.username}今日点餐信息`,
              });
            }
          });
        })
        .catch(() => {});
    },
    getUsername(id) {
      if (id == "" || !this.yonghuArr.length) {
        return "";
      }
      let arr = this.yonghuArr.filter((item) => {
        return item.id == id;
      });
      return arr[0].username;
    },
    doubleClick() {
      this.$prompt("输入菜品名*N", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          if (!value.includes("*")) {
            if (!this.caipinArr.includes(value)) {
              this.$message(`没有${value}这个菜品`);
              return;
            } else {
              this.caipinSelectArr.push(value);
              this.$message({
                message: `成功添加${value}1份，如有多份菜品，需取消双击菜品选项，双击一次取消一份。`,
                type: "success",
              });

              return;
            }
          } else {
            let arr = value.split("*");
            if (arr.length != 2) {
              this.$message('格式不正确，请重新输入，正确格式是"菜品名*N"');
              return;
            }
          }
          let arr = value.split("*");
          let name = arr[0];
          if (!this.caipinArr.includes(name)) {
            this.$message(`没有${name}这个菜品`);
            return;
          }
          let num = Number(arr[1]);
          if (typeof num === "number" && !isNaN(num)) {
            for (let i = 1; i <= num; i++) {
              this.caipinSelectArr.push(name);
            }
            this.$message({
              message: `成功添加${name}${num}份，如有多份菜品，需取消双击菜品选项，双击一次取消一份。`,
              type: "success",
            });
          } else {
            this.$message(`菜品数量不是纯数字类型`);
            return;
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    timeOver() {
      this.kedian = false;
    },
    getDiancan(type, data) {
      if (type == "net") {
        getDiancan({
          nowDay: new Date().Format("yyyy-MM-dd"),
        }).then((res) => {
          this.setDianCan(res);
        });
      } else if (type == "socket") {
        this.setDianCan(data["list"]);
      }
    },
    setDianCan(res) {
      console.log(this.caipinArr);
      if (res.length >= 0) {
        this.users = res;
        let nameArr = [];
        let nameObj = {};
        this.error = [];
        this.yidian = false;
        this.users.forEach((item) => {
          let cp = item.caipin;
          let arr = [];
          if (!cp.includes(",")) {
            arr = [cp];
          } else {
            arr = cp.split(",");
          }
          arr.forEach((info) => {
            let key = info + item.level;

            if (!nameArr.includes(key)) {
              nameArr.push(key);
              nameObj[key] = 1;
            } else {
              nameObj[key] += 1;
            }
            if (
              !this.caipinArr.includes(key.substr(0, key.length - 2)) &&
              !this.error.includes(info)
            ) {
              this.error.push(info);
            }
          });
          // debugger
          if (item.username == this.currentUser.username && this.firstInit) {
            this.yidian = true;
            console.log("tag", item.caipin.split(","));
            this.caipinSelectArr = item.caipin.split(",");
          }
        });
        let str = "";
        for (let info in nameObj) {
          str += info + "*" + nameObj[info] + "、";
        }
        str = str.substr(0, str.length - 1);
        if (str != this.total) {
          this.total = str;
          this.change += 1;
        }
        this.firstInit = false;
      }
    },
    getYonghu() {
      getYonghu().then((res) => {
        this.yonghuArr = res;
      });
    },
    getTotalStr(str) {
      let arr = typeof str === "String" ? arr.split(",") : str;
      let nameArr = Array.from(new Set(arr));
      let obj = {};
      nameArr.forEach((item) => {
        obj[item] = 0;
        arr.forEach((info) => {
          if (info == item) {
            obj[item] += 1;
          }
        });
      });
      let returnStr = "";
      for (let info in obj) {
        returnStr += `${info}*${obj[info]}、`;
      }
      return returnStr.substr(0, returnStr.length - 1);
    },
    diancan() {
      if (this.caipinSelectArr.length == 0) {
        this.$message({
          message: "菜品不能为空",
          type: "error",
        });
        return;
      }

      this.$confirm(
        "是否提交当前点餐信息？<br>" + this.getTotalStr(this.caipinSelectArr),
        "提示",
        {
          dangerouslyUseHTMLString: true,
          confirmButtonText: "提交",
          cancelButtonText: "取消",
          type: "info",
        }
      )
        .then(() => {
          this.diancanOK();
        })
        .catch(() => {});
      this.$comment.createPoint({
        tableName: "food",
        moduleName: "点餐页",
        pageName: "/vesync/food",
        eventName: "点击点餐",
        localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S"),
      });
    },
    diancanOK() {
      let double = false;
      if (
        this.caipinSelectArr.length !=
        Array.from(new Set(this.caipinSelectArr)).length
      ) {
        double = true;
      }

      let person = this.yonghuArr.filter((item) => {
        return item.id == this.diancanren;
      })[0].username;
      diancan({
        riqi: new Date().Format("yyyy-MM-dd"),
        tjtime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
        diancanren: person,
        caipinSelectArr: this.caipinSelectArr,
      }).then((res) => {
        if (res == "over") {
          this.$message({
            message: "点餐失败,当前时间不在点餐时间范围内！",
            type: "error",
          });
          setTimeout(() => {
            location.reload();
          }, 3000);
        } else {
          this.$message({
            message: "点餐成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
#etekcity {
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  background-color: black;

.img-bg-fuqinjie {
      width: 100%;
      min-height: 100%;
      position: absolute;

      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        img{
          width 100%
          height 100%
          position absolute
          animation: shan 6s infinite linear
        }
        @keyframes shan {
          50%{opacity:0.8}
        }
      }
      .logo{
        position: absolute;
        top:0;
        left:0;
        width:450px;
        // opacity:0.8;
        transform:scale(0.5)
      }

      .sun{
        position: absolute;
        bottom:0px;
        right:0px;
        height: 85%
        
      }
      .qiche{
        position: absolute;
        bottom: 200px;
        right: 0px;
        height: 45%;
      }
      
      
  }

  .img-bg-zhounianqing {
      width: 100%;
      min-height: 100%;
      position: absolute;

      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        img{
          width 100%
          height 100%
          position absolute
          animation: shan 6s infinite linear
        }
        @keyframes shan {
          50%{opacity:0.8}
        }
      }
      .logo{
        position: absolute;
        top:0;
        right:0;
        width:450px;
        opacity:0.8
      }

      .dangao{
        position: absolute;
        bottom:20px;
        left:30px;
        width:170px;
      }
      .zhounian{
        position: absolute;
        bottom: 206px;
        left: 79px;
        width: 70px;
      }
  }
  .img-bg-guoqing {
    width: 100%;
    min-height: 100%;
    position: absolute;

    .bg {
      width: 100%;
      height: 100%;
      // background: url('../../assets/节日/国庆节/bg.jpg');
      // opacity: 0.6;
      position: absolute;
      img{
        width 100%
        height 100%
        position absolute
      }
    }

    .feiji {
      width: 400px;
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .shien {
      height: 20%;
      position: absolute;
      right: 0px;
      bottom: 0px;
    }

    .shuying {
      width 70%
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform translateX(-55%)
      opacity 0.8
      animation shandong 10s infinite linear
    }
    @keyframes shandong {
      50%{
        opacity 0.2
      }
    }

    .renwu {
      height: 20%;
      position: absolute;
      left: 20px;
      bottom: 20px;
    }
  }
  // background-image: url('../../assets/login_bg.svg');
  // .img-bg-zhongqiu {
  //   width: 100%;
  //   min-height: 100%;
  //   position: absolute;

  //   .bg {
  //     width: 100%;
  //     min-height: 100%;
  //     background: url('../../assets/节日/中秋节/背景.jpg');
  //     opacity: 0.6;
  //     position: absolute;
  //   }

  //   .feiji {
  //     height: 30%;
  //     position: absolute;
  //     left: 20px;
  //     bottom: 20px;
  //   }

  //   .shien {
  //     height: 40%;
  //     position: absolute;
  //     right: 0px;
  //     bottom: 0px;
  //   }

  //   .shuying {
  //     height: 40%;
  //     position: absolute;
  //     right: 0px;
  //     top: 0px;
  //   }

  //   .renwu {
  //     height: 35%;
  //     position: absolute;
  //     left: 20px;
  //     bottom: 20px;
  //   }
  // }

  .red {
    color: red !important;
  }

  .gonggao {
    background: url('../../assets/gonggao.png') no-repeat;
    width: 60px;
    height: 71px;
    background-size: 100% 80%;
    // transform :scale(0.2)
  }

  .goto {
    border-bottom: 1px solid #0e335a;
    padding: 0 5px 1px 5px;
    color: #0e335a;
    cursor: pointer;
  }

  .admin {
    width: 640px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow-y: auto;
  }

  .main {
    width: 640px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    &::-webkit-scrollbar {
      width: 1px;
    }

    &::-webkit-scrollbar-thumb {
      background: #909090;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

    .main-div {
      width: 100%;
      max-height: 100%;
    }

    .football img {
      width: 40px;
      position: absolute;
      z-index: 9999;
      animation: zuqiu 5s infinite linear;
      -webkit-backface-visibility: hidden; // 隐藏转换的元素的背面
      cursor: pointer;
    }

    @keyframes zuqiu{
      0%{transform: rotate(0deg)}
      50%{transform: rotate(360deg)}
      100%{transform: rotate(0deg)}
    }

    @keyframes zuqiudonghua {
      0% {
        transform: translate(30px, 10px) rotate(100deg);
      }

      5% {
        transform: translate(50px, 15px) rotate(200deg);
      }

      10% {
        transform: translate(90px, 20px) rotate(300deg);
      }

      15% {
        transform: translate(150px, 30px) rotate(500deg);
      }

      20% {
        transform: translate(210px, 40px) rotate(700deg);
      }

      25% {
        transform: translate(300px, 50px) rotate(900deg);
      }

      30% {
        transform: translate(340px, 50px) rotate(1100deg);
      }

      35% {
        transform: translate(380px, 40px) rotate(1300deg);
      }

      40% {
        transform: translate(440px, 30px) rotate(1500deg);
      }

      45% {
        transform: translate(500px, 20px) rotate(1700deg);
      }

      50% {
        transform: translate(600px, 10px) rotate(1900deg);
      }

      55% {
        transform: translate(500px, 20px) rotate(1700deg);
      }

      60% {
        transform: translate(440px, -10px) rotate(1500deg);
      }

      65% {
        transform: translate(380px, 0px) rotate(1300deg);
      }

      70% {
        transform: translate(340px, 10px) rotate(1100deg);
      }

      75% {
        transform: translate(300px, 10px) rotate(900deg);
      }

      80% {
        transform: translate(210px, 0px) rotate(700deg);
      }

      85% {
        transform: translate(150px, -10px) rotate(500deg);
      }

      90% {
        transform: translate(90px, -20px) rotate(300deg);
      }

      100% {
        transform: translate(30px, 10px) rotate(100deg);
      }
    }
  }

  .flex-x-y-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .row {
    // width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    color: #262626;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.6);
    // background-color:#000;
    border-radius: 10px;
    padding: 15px 15px;
    margin: 10px;
  }

  .left {
    flex-basis: 120px;
    text-align: right;
  }

  .middle {
    flex: 1;
    text-align: left;
  }

  .right {
    flex: 1;
    text-align: left;
  }

  .el-input__inner {
    width: 250px;
  }

  .row .info {
    display: flex;
    width: 100%;
  }

  .info .user {
    flex-basis: 120px;
    text-align: right;
  }

  .info .caipin {
    flex: 1;
    text-align: left;
  }

  .el-checkbox {
    margin: 10px 15px;
    width: 110px;
    /* color: white; */
  }

  a {
    color: #0e335a;
  }
}
</style>
<style lang="stylus">
.el-checkbox__label {
  color: #262626;
}
#etekcity .middle {
    flex: 1;
    text-align: left;
    .el-checkbox__input.is-checked+.el-checkbox__label{
      color:#0e335a !important
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color:#0e335a !important
    }
  }
</style>
